<template>
  <div class="admin">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="标题">
        <a-input v-model="form.cTitle" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item label="封面地址">
        <a-input v-model="form.cImgUrl" placeholder="请输入封面地址" />
      </a-form-item>
      <a-form-item label="分类">
        <a-input v-model="form.typeid" placeholder="请输入分类" />
      </a-form-item>
      <a-form-item label="前言">
        <a-input v-model="form.cPreface" placeholder="请输入前言" />
      </a-form-item>
      <mavon-editor ref="md" v-model="value" @change="handelChange" @imgAdd="$imgAdd" />
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" @click="handleSubmit">
          发布
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import "mavon-editor/dist/highlightjs/styles/vs2015.min.css";
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import * as qiniu from "qiniu-js";
import config from "../../../utils/config";
@Component({
  head() {
    return {
      title: "登录",
      titleTemplate: "%s - by 刘洋博客",
    };
  },
})
export default class extends Vue {
  form: any = { cMdContent: "", cHtmlContent: "" };
  value: string = "";
  $axios: any;
  $message: any;
  $route: any;
  created() {
    // console.log();
    // this.loadDownList();
    if (this.$route.query.id) {
      this.loadDetail();
    }
  }
  
  // 分类列表
  async loadDownList() {
    const res = await this.$axios.$post(
      config.BASE_URL + "/api/article/detail"
    );
    if (res.c == 1) {
    } else {
      this.$message.error(res.m);
    }
  }
  // 获取详情
  async loadDetail() {
    let param = {
      cid: this.$route.query.id,
    };
    const res = await this.$axios.$post(
      config.BASE_URL + "/api/article/detail",
      param
    );
    if (res.c == 1) {
      let { cimg, ctitle } = res.d;
      this.form = res.d;
      this.form.cTitle = ctitle;
      this.form.cImgUrl = cimg;
      this.value = res.d.cMdContent;
    } else {
      this.$message.error(res.m);
    }
  }

  async handleSubmit() {

    let res = null
    let url = config.BASE_URL + "/api/article/add" //默认添加
    if(this.$route.query.id){
      // 编辑
      url = config.BASE_URL + "/api/article/editById" 
    }
     res = await this.$axios.$post(
      url,
      this.form
    );
    if (res.c == 1) {
      this.$message.success(res.m);
    } else {
      this.$message.error(res.m);
    }
    console.log(res);
    // this.$axios.post("/api/admin/add", this.form).then((res) => {
    //   if (res.status == "error") {
    //     console.log(JSON.stringify(res.config.data));
    //   } else {
    //     // console.log(JSON.stringify(res.config.data));
    //     // this.$message(res.data.d.msg);
    //   }
    // });
  }
  $imgAdd(pos: any, $file: File) {
    //后端获取token
    this.$axios.get("/api/file/getQiNiuToken").then((res: any) => {
      if (res.status == 200) {
        var uptoken: string = res.data.d;
        var file: File = $file; //Blob 对象，上传的文件
        var key: string = "itliuyang-" + this.getuuid(); // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
        let config: object = {
          useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: null, // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };
        let putExtra: object = {
          fname: $file.name, //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null, //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
        var observable = qiniu.upload(file, key, uptoken, putExtra, config);
        observable.subscribe({
          next: (result) => {
            // 主要用来展示进度
            // console.log(result)
          },
          error: (errResult) => {
            // 失败报错信息
            // console.log(errResult)
          },
          complete: (result) => {
            let qiUrl: string = "https://qn.itliuyang.com/" + result.key;
            // 接收成功后返回的信息
            (this.$refs.md as any).$img2Url(pos, qiUrl);
          },
        });
      }
    });
  }
  getuuid() {
    let s: Array<any> = [];
    let hexDigits: string = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
    var uuid = s.join("");
    return uuid;
  }
  handelChange(value: any, render: any) {
    // console.log("ffff", render);
    (this.form as any).cMdContent = value;
    (this.form as any).cHtmlContent = render;
  }
}
</script>

<style lang="scss" scoped>
.loginContainer {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .btnLogin {
    margin: 0 auto;
    display: block;
  }
  .lgTitle {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
}
</style>
<style>
.admin_header {
  height: 4rem;
  line-height: 4rem;
  padding: 0 1rem;
  background-color: #545c64;
  position: absolute;
  top: 0;
  width: 100%;
}
.admin_content {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 4rem;
}
.admin_slider {
  width: 300px;
  position: absolute;
  left: 0;
  height: 100%;
  background: rgb(84, 92, 100);
}
.admin_main {
  position: absolute;
  left: 200px;
  right: 0;
  padding: 0 1rem;
  width: auto !important;
  overflow: auto;
}
.markdown-body {
  height: 600px;
  overflow: auto;
}
</style>

